<template>
  <uni-search-bar @confirm="doSearch" @clear="doClear" v-model="searchVal" cancelButton="none" placeholder="请输入用户名或手机号码(后4位)"></uni-search-bar>
  
  <!-- 列表 -->
  <uni-list>
  	<uni-list-item 
      :to="`/pages/member-detail/member-detail?id=${item.id}`" 
      v-for="item in list" 
      :title="`${item.name} (${item.mobile})`" 
      :note="`剩余${item.count}次, 最近充值: ${getLastCzDate(item.id)}`" 
      link>
    </uni-list-item>
  </uni-list>
  
  <!-- 更多 -->
  <uni-load-more status="noMore"></uni-load-more>
</template>

<script>
  import { getMemberList, getLastCzDate, getMemberBySearch } from '../../utils/storage.js'
  
  export default {
    /* onLoad() {
      console.log('load')
    },
    mounted() {
      console.log('mounted')
    },
    activated() {
      console.log('activated')
    },
    deactivated() {
    }, */
    onShow() {
      if (this.searchVal) {
        this.list = getMemberBySearch(this.searchVal)
        return
      }
      this.list = getMemberList()
    },
    data() {
      return {
        list: [],
        searchVal: ''
      }
    },
    methods: {
      getLastCzDate,
      doSearch(e) {
        const val = e.value
        this.list = getMemberBySearch(val)
      },
      doClear() {
        this.list = getMemberList()
      }
    }
  }
</script>

<style>

</style>
